<script lang="ts" setup>
import {onMounted, ref} from 'vue'
import { QTable, type TableColums, } from '@meetjs/element-plus-kit'
import axios from "axios";
const title = ref('预约挂号信息')
const page = ref({ currentPage: 1, pageSize: 10, total: 30 })
const tableData = ref([])
const columns = ref<TableColums[]>([
  { label: '序号', type: 'index', align: 'center', width: 60 },
  { prop: 'patientUserId.name', label: '患者-姓名' },
  { prop: 'patientUserId.bornDate', label: '患者-出生日期' },
  { prop: 'aneshesiaType', label: '麻醉方式' },
  { prop: 'reservationTime', label: '预约时间' },
  // { prop: 'action', fixed: 'right', label: '操作', width: 200, },
])
const headers = {
  token:localStorage.getItem("doctor-auth-token")
}
const getData = () => {
  axios.post(`/api/reservation/list/${page.value.currentPage}/${page.value.pageSize}`)
      .then(res=>{
        console.log(res);
        const msg = res.data.message
        msg.list.forEach(el=>{
          el.patientUserId = JSON.parse(el.patientUserId)
          if(el.patientUserId.bornDate){
            el.patientUserId.bornDate = new Intl.DateTimeFormat('zh-CN', {
              year: 'numeric',
              month: '2-digit',
              day: '2-digit',
            }).format(el.patientUserId.bornDate);
          }
        })
        page.value.total = msg.total
        tableData.value = msg.list
      })
}
onMounted(()=>{
  getData()
})

</script>

<template>
  <div>
    <QTable :columns="columns" :data="tableData" :page="page" :title="title" @pageChange="getData">
      <template #empty>
        <div style="font-weight:400;font-size:32px;margin: 30px;">暂无更多预约</div>
      </template>
    </QTable>
  </div>
</template>

<style lang="scss" scoped>

</style>
